<template>
  <div>
    <div :class="$q.screen.gt.xs ? 'q-ma-md' : 'q-pa-xs'">
      <q-breadcrumbs active-color="primary">
        <q-breadcrumbs-el icon="home" to="/"/>
        <q-breadcrumbs-el label="我的空间" icon="mdi-folder-home" to="/drive/me" />
        <q-breadcrumbs-el label="Breadcrumbs" icon="mdi-folder" to="/vue-components/breadcrumbs" />
        <q-breadcrumbs-el label="子目录" icon="mdi-folder-account" />
        <q-breadcrumbs-el label="子目录" icon="mdi-folder" />
        <q-breadcrumbs-el label="子目录" icon="mdi-folder-open" />
      </q-breadcrumbs>
    </div>

    <div :class="$q.screen.gt.xs ? 'row justify-between flex-center q-mx-md q-my-lg ' : 'row justify-between flex-center q-mx-sm'">
      <div class="col-12 col-sm-4 no-wrap q-mb-sm">
        <q-btn-dropdown
          split
          dense
          :class="'q-mr-xs q-mt-xs custom-btn ' + ($q.dark.isActive ? 'dark-mode' : '')"
          size="md"
          label="上传"
          icon="mdi-file-upload"
          @click="onBtnUploadClick"
          >
          <q-list>
            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-folder-upload" style="color: #FBCE4F;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>上传文件夹</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-file-upload" style="color: #9E9A8C;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>上传文件</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-import" style="color: #185ABD;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>导入为云格式...</q-item-label>
              </q-item-section>
            </q-item>

          </q-list>
        </q-btn-dropdown>
        <q-btn-dropdown
          split
          dense
          size="md"
          :class="'q-mr-xs q-mt-xs custom-btn ' + ($q.dark.isActive ? 'dark-mode' : '')"
          label="新建"
          icon="mdi-file-word"
          @click="onBtnCreateClick"
          >
          <q-list>
            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-folder-plus" style="color: #FBCE4F;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>文件夹</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator class="" />

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-file-word" style="color: #185ABD;"/>
              </q-item-section>
              <q-item-section>
                <q-item-label>文档</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-file-excel" style="color: #107C41;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>表格</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="mdi-new-box" color="yellow-10"/>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-file-powerpoint" style="color: #C43E1C;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>幻灯片</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator class="" />

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-file-tree-outline" style="color: #7719AA;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>思维脑图</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-draw" style="color: #7719AA;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>画板</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-icon name="mdi-sitemap-outline" style="color: #7719AA;" />
              </q-item-section>
              <q-item-section>
                <q-item-label>流程图</q-item-label>
              </q-item-section>
            </q-item>

          </q-list>
        </q-btn-dropdown>
      </div>
      <div class="col-4 col-sm-2 q-mb-xs">
        <q-input 
          dense 
          borderless
          clearable
          clear-icon="close"
          class="q-pl-sm q-pr-md rounded-borders custom-input"
          debounce="300" 
          v-model="filter" 
          label="名称过滤">
        </q-input>
      </div>
      <div class="col-7 col-sm-5 q-mb-xs">
        <q-select
          dense
          borderless
          clearable
          clear-icon="close"
          v-model="multiSelects"
          :options="mapOptions"
          multiple
          options-dense
          use-chips
          label="条件过滤"
          class="q-mx-xs q-pl-sm q-pr-md rounded-borders custom-input"
          style="min-width: 120px;"
          >
          <template v-slot:option="scope">
            <q-list>
              <q-item v-bind="scope.itemProps" class="q-ma-xs">
                <q-item-section avatar>
                  <q-icon :name="scope.opt.icon" :style="'color:' + scope.opt.color"/>
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </template>

          <template v-slot:selected-item="scope">
            <q-chip
              removable
              dense
              @remove="scope.removeAtIndex(scope.index)"
              :tabindex="scope.tabindex"
              class="q-pa-xs"
            >
              <template v-if="scope.opt.icon">
                <q-icon :name="scope.opt.icon" size="sm" :style="'color:' + scope.opt.color" class="q-mr-xs"/>
              </template>
              {{ scope.opt.label }}
            </q-chip>
          </template>
        </q-select>
      </div>

      <div class="col-1 col-sm-auto q-mb-xs">
          <template v-if="$q.screen.gt.md">
            <q-btn dense flat icon="mdi-view-grid-outline" @click="tableGrid = true" v-if="!tableGrid"/>
            <q-btn dense flat icon="mdi-format-list-text" @click="tableGrid = false" v-if="tableGrid"/>
          </template>
          <q-btn-dropdown dense flat auto-close icon="mdi-dots-vertical" class="btn-dropdown-hide-droparrow">
            <div class="no-wrap q-pa-sm">
              <div class="column">
                <!--
                <q-btn flat align="left" icon="fullscreen" label="全屏" @click="table.toggleFullscreen()" />
                -->
                <q-btn flat align="left" icon="mdi-view-grid-outline" label="格子视图" @click="tableGrid = true" v-if="!tableGrid"/>
                <q-btn flat align="left" icon="mdi-format-list-text" label="列表视图"  @click="tableGrid = false" v-if="tableGrid"/>
                <q-btn flat align="left" icon="mdi-view-comfy" label="宽松模式" @click="compactMode = !compactMode" v-if="compactMode"/>
                <q-btn flat align="left" icon="mdi-view-comfy" label="紧凑模式" @click="compactMode = !compactMode" v-if="!compactMode"/>
                <q-separator/>
                <div class="q-pa-md">
                  <q-checkbox dense label="创建时间" />
                </div>
              </div>
            </div>
          </q-btn-dropdown>
      </div>
    </div>

    <div :class="$q.screen.gt.xs ? 'q-px-sm' : ''">
      <q-table
        dense
        ref="table"
        :rows="rows"
        :columns="columns"
        :visible-columns="visibleColumns"
        row-key="id"
        selection="multiple"
        v-model:selected="selectedForTable"
        :filter="filterComputed"
        :filter-method="filterMethod"
        :grid="tableGrid"
        :hide-header="false"
        :rows-per-page-options="[0]"
        >
        <template v-slot:no-data>
          <div class="full-width row flex-center text-accent q-gutter-sm" style="height:40vh">
            <q-icon size="8em" name="sentiment_dissatisfied" />
            <span class="" style="font-size: 3em">
              无数据
            </span>
          </div>
        </template>

        <template v-slot:body-cell-fileExtension="props">
          <q-td :props="props">
            <div>
              <q-icon :size="compactMode ? '30px' : '50px'" rounded
                  :name="getIconNameByFileExtension(props.row)" 
                  :style="getIconStyle(props.row, true)"
              >
                <q-icon v-if="props.row.shortcutType === 5" name="mdi-share" class="absolute" size="sm" color="blue" style="bottom: 0px; left: 0;"/>
              </q-icon>
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-fileName="props">
          <q-td :props="props" style="white-space: pre-wrap;">
            <div class="ellipsis-3-lines " style="font-size:0.9rem; min-width: 170px; line-height: normal;">
              {{ props.value }}
              </div>
          </q-td>
        </template>

        <template v-slot:body-cell-actions="props">
          <q-td :props="props">
            <q-btn
              round flat dense
              :icon="props.row.favoriteType == 5 ? 'mdi-star' : 'mdi-star-outline'"  
              :color="props.row.favoriteType == 5 ? 'yellow' : 'grey-4'" />
              
              <q-btn-dropdown round flat auto-close dense
                icon="mdi-dots-horizontal"
                color="grey-6"
                class="btn-dropdown-hide-droparrow">
                <div class="no-wrap q-pa-sm">
                  <div class="column">
                    <q-btn flat align="left" icon="mdi-open-in-new" label="打开..."/>
                    <q-btn flat align="left" icon="mdi-file-edit-outline" label="编辑..."/>
                    <q-btn flat align="left" icon="mdi-share-variant" label="分享..."/>
                    <q-btn flat align="left" icon="mdi-link" label="拷贝链接" />
                    <q-btn flat align="left" icon="mdi-list-box-outline" label="查看属性..." />
                    <q-separator/>
                    <q-btn flat align="left" icon="mdi-file-multiple-outline" label="复制到..."/>
                    <q-btn flat align="left" icon="mdi-file-move-outline" label="移动到..."/>
                    <q-btn flat align="left" icon="mdi-share" label="创建快捷方式..."/>
                    <q-btn flat align="left" icon="mdi-transit-transfer" label="转移所有者..."/>
                    <q-separator/>
                    <q-btn flat align="left" icon="mdi-form-textbox" label="重命名..."/>
                    <q-btn flat align="left" icon="mdi-export" label="导出其他格式..."/>
                    <q-btn flat align="left" icon="mdi-download" label="下载到本地"/>
                    <q-btn flat align="left" icon="mdi-star-off" label="取消收藏" v-if="props.row.favoriteType == 5"/>
                    <q-btn flat align="left" icon="mdi-star-plus" label="添加收藏" v-else />
                    <q-separator/>
                    <q-btn flat align="left" icon="mdi-delete" label="删除"/>
                  </div>
                </div>
              </q-btn-dropdown>
          </q-td>
        </template>

        <template v-slot:item="props">
          <div :class="compactMode ? 'q-pa-sm col-xs-6 col-sm-3 col-md-3 col-lg-2 col-xl-2 grid-style-transition' : 'q-pa-sm col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 grid-style-transition'"
            >
            <q-card class="q-mt-lg">

              <q-card-section class="q-py-xs">
                <q-icon size="64px"
                  rounded
                  :name="getIconNameByFileExtension(props.row)" 
                  class="absolute"
                  :style="getIconStyle(props.row, false)"
                >
                  <q-icon v-if="props.row.shortcutType == 5" name="mdi-share" class="absolute" size="sm" color="blue" style="bottom: 0px; left: 0;"/>
                </q-icon>
                <!--
                <div class="text-caption text-grey absolute" style="top: 0; right: 20px">
                  最近更新 {{ calcDateToHumanReadable(props.row.updateTime) }}
                </div>
                -->

                <div class="row no-wrap items-center q-pt-sm">
                  <div class="col text-grey-7 text-caption q-pt-sm q-pl-sm row no-wrap items-center">
                    {{ calcFileSizeToHumanReadable(props.row) }}
                  </div>
                  <div class="col-auto no-wrap">
                    <q-btn flat round dense
                      :icon="props.row.favoriteType == 5 ? 'mdi-star' : 'mdi-star-outline'"  
                      :color="props.row.favoriteType == 5 ? 'yellow' : 'grey-4'" />
                    <q-btn-dropdown round flat dense auto-close 
                      icon="mdi-dots-horizontal" 
                      color="grey-6"
                      class="btn-dropdown-hide-droparrow">
                      <div class="no-wrap q-pa-sm">
                        <div class="column">
                          <q-btn flat align="left" icon="mdi-open-in-new" label="打开..."/>
                          <q-btn flat align="left" icon="mdi-file-edit-outline" label="编辑..."/>
                          <q-btn flat align="left" icon="mdi-share-variant" label="分享..."/>
                          <q-btn flat align="left" icon="mdi-link" label="拷贝链接" />
                          <q-btn flat align="left" icon="mdi-list-box-outline" label="查看属性..." />
                          <q-separator/>
                          <q-btn flat align="left" icon="mdi-file-multiple-outline" label="复制到..."/>
                          <q-btn flat align="left" icon="mdi-file-move-outline" label="移动到..."/>
                          <q-btn flat align="left" icon="mdi-share" label="创建快捷方式..."/>
                          <q-btn flat align="left" icon="mdi-transit-transfer" label="转移所有者..."/>
                          <q-separator/>
                          <q-btn flat align="left" icon="mdi-form-textbox" label="重命名..."/>
                          <q-btn flat align="left" icon="mdi-export" label="导出其他格式..."/>
                          <q-btn flat align="left" icon="mdi-download" label="下载到本地"/>
                          <q-btn flat align="left" icon="mdi-star-off" label="取消收藏" v-if="props.row.favoriteType == 5"/>
                          <q-btn flat align="left" icon="mdi-star-plus" label="添加收藏" v-else />
                          <q-separator/>
                          <q-btn flat align="left" icon="mdi-delete" label="删除"/>
                        </div>
                      </div>
                    </q-btn-dropdown>

                  </div>
                </div>

              </q-card-section>

              <q-card-section class="q-pt-none">
                <div class="ellipsis" style="font-size: 0.9rem;"><!-- ellipsis-2-lines -->
                  {{ props.row.fileName }}
                </div>
                <div class="text-caption text-grey" v-if="!compactMode">
                  最近更新 {{ calcDateToHumanReadable(props.row.updateTime) }}
                </div>
              </q-card-section>

            </q-card>
          </div>     
        </template>

      </q-table>
    </div>


  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { format, date } from 'quasar'

const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left' },
  { name: 'fileExtension', label: '', field: 'fileExtension', align: 'center', sortable: true },
  { name: 'fileName', label: '名称', field: 'fileName', align: 'left', required: true, sortable: true },
  { name: 'actions', label: '' },
  { name: 'category', label: '分类', field: 'category', sortable: true },
  { name: 'sizeOfBytes', label: '文件大小', field: 'sizeOfBytes', sortable: true, format: (v) => format.humanStorageSize(v) },
  { name: 'favoriteType', label: '喜欢', field: 'favoriteType' },
  { name: 'shortcutType', label: '快捷方式', field: 'shortcutType' },
  { name: 'owner', label: '所有者', field: 'owner', align: "left", sortable: true },
  { name: 'createUser', label: '创建人', field: 'createUser', sortable: true },
  { name: 'updateTime', label: '更新时间', field: 'updateTime', sortable: true, format: (v) => date.formatDate(v, 'YYYY-MM-DD HH:mm') },
  { name: 'createTime', label: '创建时间', field: 'createTime', sortable: true, format: (v) => date.formatDate(v, 'YYYY-MM-DD HH:mm') },
]

const rows = [
{
    id: '10',
    fileName: '测试Excel xlsx文件',
    fileExtension: 'xlsx',
    category: 20,
    sizeOfBytes: 24001,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: 1696760611030,
    updateTime: 1696762611002
  },
  {
    id: '15',
    fileName: '测试文件夹',
    fileExtension: '',
    category: 1,
    sizeOfBytes: 0,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: 1693760611030,
    updateTime: 1696762611002
  },
  {
    id: '16',
    fileName: '测试文件夹2',
    fileExtension: '',
    category: 1,
    sizeOfBytes: 0,
    favoriteType: 5,
    shortcutType: 1,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1693760611030',
    updateTime: '1696762611002'
  },
  {
    id: '20',
    fileName: '测试Excel xlsx文件有一个非常非常长的名字，用来测试长名的文件名 xlsx 文件有一个非常非常长的名字，用来测试长名的文件名',
    fileExtension: 'xlsx',
    category: 20,
    sizeOfBytes: 2001,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1693760611030',
    updateTime: '1696762611002'
  },
  {
    id: '30',
    fileName: '测试Excel xls文件',
    fileExtension: 'xls',
    category: 20,
    sizeOfBytes: 3524001,
    favoriteType: 5,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '40',
    fileName: '测试Word doc文件',
    fileExtension: 'doc',
    category: 10,
    sizeOfBytes: 4001,
    favoriteType: 5,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '50',
    fileName: '测试Word docx文件',
    fileExtension: 'docx',
    category: 10,
    sizeOfBytes: 54001,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '60',
    fileName: '测试lexical文件',
    fileExtension: 'lexical',
    category: 10,
    sizeOfBytes: 54001,
    favoriteType: 5,
    shortcutType: 1,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '70',
    fileName: '测试lexical文件2',
    fileExtension: 'lexical',
    category: 10,
    sizeOfBytes: 10,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '80',
    fileName: '测试PPT文件',
    fileExtension: 'ppt',
    category: 30,
    sizeOfBytes: 33310,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '90',
    fileName: '测试PPTX文件',
    fileExtension: 'pptx',
    category: 30,
    sizeOfBytes: 63310,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '100',
    fileName: '测试PPTist文件',
    fileExtension: 'pptist',
    category: 30,
    sizeOfBytes: 163310,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '110',
    fileName: '测试luckysheet文件',
    fileExtension: 'luckysheet',
    category: 20,
    sizeOfBytes: 53310,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '120',
    fileName: 'mkv视频文件',
    fileExtension: 'mkv',
    category: 70,
    sizeOfBytes: 353310,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '130',
    fileName: 'MP3音频文件',
    fileExtension: 'mp3',
    category: 70,
    sizeOfBytes: 13310,
    favoriteType: 5,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '140',
    fileName: 'MP3音频文件(快捷方式)',
    fileExtension: 'mp3',
    category: 70,
    sizeOfBytes: 0,
    favoriteType: 0,
    shortcutType: 5,
    owner: '1478364767472807938',
    createUser: '1478364762472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '150',
    fileName: 'PNG图片文件',
    fileExtension: 'png',
    category: 60,
    sizeOfBytes: 83830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '160',
    fileName: 'jpg图片文件',
    fileExtension: 'jpg',
    category: 60,
    sizeOfBytes: 23830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '170',
    fileName: 'PDF文件',
    fileExtension: 'pdf',
    category: 50,
    sizeOfBytes: 983830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '180',
    fileName: 'PDF文件2',
    fileExtension: 'pdf',
    category: 50,
    sizeOfBytes: 93830,
    favoriteType: 5,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '190',
    fileName: 'PDF文件3',
    fileExtension: 'pdf',
    category: 50,
    sizeOfBytes: 793830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1893762611002'
  },
  {
    id: '200',
    fileName: '画板',
    fileExtension: 'excalidraw',
    category: 40,
    sizeOfBytes: 53830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760511030',
    updateTime: '1893762611002'
  },
  {
    id: '205',
    fileName: 'MP4视频',
    fileExtension: 'mp4',
    category: 70,
    sizeOfBytes: 12385830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760511030',
    updateTime: '1893762611002'
  },
  {
    id: '210',
    fileName: '脑图XMIND',
    fileExtension: 'xmind',
    category: 40,
    sizeOfBytes: 653830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760671030',
    updateTime: '1896762611002'
  },
  {
    id: '211',
    fileName: '脑图mindmap',
    fileExtension: 'smm',
    category: 40,
    sizeOfBytes: 98383,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760671030',
    updateTime: '1896762611002'
  },
  {
    id: '220',
    fileName: '流程图draw.io',
    fileExtension: 'drawio',
    category: 40,
    sizeOfBytes: 253830,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364762472807938',
    createTime: '1656660611030',
    updateTime: '1896762611002'
  },
  {
    id: '230',
    fileName: 'TXT文件',
    fileExtension: 'txt',
    category: 250,
    sizeOfBytes: 230,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '240',
    fileName: 'ZIP文件',
    fileExtension: 'zip',
    category: 80,
    sizeOfBytes: 8963443366753,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1478364767472807938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '250',
    fileName: 'MD文件',
    fileExtension: 'md',
    category: 250,
    sizeOfBytes: 84562,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1438364767472107938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
  {
    id: '260',
    fileName: 'ZIP文件2',
    fileExtension: 'zip',
    category: 80,
    sizeOfBytes: 8963453,
    favoriteType: 0,
    shortcutType: 0,
    owner: '1438364767472107938',
    createUser: '1478364767472807938',
    createTime: '1656760611030',
    updateTime: '1896762611002'
  },
]

export default {
  setup () {
    const table = ref(null)
    const selectedForTable = ref([])
    const multiSelects = ref(null)
    const filter = ref('')
    function doFilter(row) {
      if (multiSelects.value && multiSelects.value.length > 0) {
        let found = false
        multiSelects.value.forEach(element => {
          if (element.value == row.category) {
            found = true
          }
        })
        if (!found) {
          return false
        }
      }
      if (filter.value) {
        if (row.fileExtension.indexOf(filter.value) >=0 ) {
          return true
        }
        if (row.fileName.indexOf(filter.value) >= 0) {
          return true
        }
        return false
      }
      return true
    }

    return {
      multiSelects,
      filter,
      table,
      filterComputed: computed(() => {
        return filter.value+':'+ JSON.stringify(multiSelects.value)
      }),
      filterMethod(rows, terms, cols, getCellValue) {
        return rows.filter(doFilter)
      },
      selectedForTable,
      columns,
      visibleColumns: ref([ 'fileExtension', 'fileName', 'actions', 'sizeOfBytes', 'owner', 'updateTime', 'createTime' ]),
      rows,
      tableGrid: ref(true),
      compactMode: ref(false),

      text: ref(''),
      ph: ref(''),
      dense: ref(false),

      model: ref(null),
      denseOpts: ref(false),
      mapOptions: [
        {
          label: '文件夹',
          value: '1',
          color: '#FBCE4F',
          icon: 'mdi-folder'
        },
        {
          label: '文档',
          value: '10',
          color: '#185ABD',
          icon: 'mdi-file-word'
        },
        {
          label: '表格',
          value: '20',
          color: '#107C41',
          icon: 'mdi-file-excel'
        },
        {
          label: '幻灯片',
          value: '30',
          color: '#C43E1C',
          icon: 'mdi-file-powerpoint'
        },
        {
          label: '绘图',
          value: '40',
          color: '#7719AA',
          icon: 'mdi-draw'
        },
        {
          label: 'PDF',
          value: '50',
          color: '#185ABD',
          disable: false,
          icon: 'mdi-file-pdf-box'
        },
        {
          label: '图片',
          value: '60',
          color: 'pink',
          icon: 'mdi-file-image'
        },
        {
          label: '音视频',
          value: '70',
          color: 'pink',
          icon: 'mdi-file-video'
        },
        {
          label: '压缩文件',
          value: '80',
          color: '#FBCE4F',
          icon: 'mdi-folder-zip'
        },
        {
          label: '其他文档',
          value: '250',
          color: '#9E9A8C',
          icon: 'mdi-file'
        },
        {
          label: '我创建的',
          value: '1000'
        },
        {
          label: '创建时间:最近一天',
          value: '2000'
        },
        {
          label: '创建时间:最近一周',
          value: '2010'
        },
        {
          label: '创建时间:最近一月',
          value: '2020'
        }
      ],

      basic: ref(false),
      fixed: ref(false),

      tab: ref('mails'),

      onBtnUploadClick(e) {
        console.log('onBtnUploadClick')
      },
      onBtnCreateClick(e) {
        console.log('onBtnCreateClick')
      },
      calcDateToHumanReadable(timestamp) {
        return date.formatDate(timestamp, 'YYYY-MM-DD HH:mm')
      },
      calcFileSizeToHumanReadable(row) {
        if (!row) {
          return ''
        }
        // Don't show size for Folder and Shortcut
        if (row.category == 1 || row.shortcutType == 5) {
          return ''
        }
        return format.humanStorageSize(row.sizeOfBytes)
      },
      getIconStyle(row, ignoreFloat) {
        let base = 'top: 0; transform: translateY(-50%);'
        if (ignoreFloat) {
          base = ''
        }
        switch (row.category) {
          case 1:
          case 80:
            return base + 'color: #FBCE4F;'

          case 10:
          case 50:
            return base + 'color:#185ABD';

          case 20:
            return base + 'color:#107C41';

          case 30:
            return base + 'color:#C43E1C';

          case 40:
            return base + "color:#7719AA";

          case 60:
          case 70:
            return base + 'color: pink';

          default:
            return base + 'color: #9E9A8C';
        }
      },
      getIconNameByFileExtension(row) {
        if (!row) {
          return
        }
        if (row.category === 1) {
          if (row.shortcutType === 1) {
            return 'mdi-folder-account'

          } else {
            return 'mdi-folder'
          }
        }
        switch (row.fileExtension) {
          case 'xls':
          case 'xlsx':
            return 'mdi-microsoft-excel';

          case 'luckysheet':
          case 'universheet':
            return 'mdi-file-excel';

          case 'doc':
          case 'docx':
            return 'mdi-microsoft-word';

          case 'lexical':
            return 'mdi-file-word';

          case 'ppt':
          case 'pptx':
            return 'mdi-microsoft-powerpoint';

          case 'pptist':
            return 'mdi-file-powerpoint';

          case 'xmind':
          case 'smm':
          case 'freemind':
          case 'emmx':
            return 'mdi-file-tree-outline'

          case 'excalidraw':
            return 'mdi-draw'

          case 'drawio':
            return 'mdi-sitemap-outline'

          case 'md':
            return 'mdi-language-markdown';

          case 'pdf':
            return 'mdi-file-pdf-box';

          case 'zip':
          case 'rar':
          case '7z':
          case 'bz':
            return 'mdi-folder-zip' //'mdi-package-variant-closed'

          case 'mp4':
          case 'avi':
          case 'asf':
          case 'flv':
          case 'f4v':
          case 'm4v':
          case 'mov':
          case '3gp':
          case 'wmv':
          case 'mkv':
          case 'rm':
          case 'rmvb':
          case 'mpg':
          case 'mpe':
          case 'mpeg':
          case 'divx':
          case 'webm':
            return 'mdi-file-video'

          case 'jpg':
          case 'jpeg':
          case 'gif':
          case 'png':
          case 'svg':
          case 'webp':
          case 'bmp':
          case 'psd':
          case 'tiff':
            return 'mdi-file-image'

          case 'mp3':
          case 'wav':
          case 'ape':
          case 'ogg':
          case 'aac':
          case 'flac':
          case 'midi':
            return 'mdi-file-music'

          default:
            return 'mdi-file'
        }
      }
    }
  }
}


</script>

<style lang="sass">
.grid-style-transition
  transition: transform .28s, background-color .28s
  
</style>
